<!DOCTYPE html>
<html>
	<head>
		<include file="head" />
		<title>会员礼遇</title>

		<style type="text/css">
			#assurance div{
				background-color: white;
				position: relative
			}
			.icon-info {
			    font-family: 'starwood';
			    speak: none;
			    font-style: normal;
			    font-weight: normal;
			    font-variant: normal;
			    text-transform: none;
			    line-height: 1;
			    -webkit-font-smoothing: antialiased;
			}
			span.brg-check {
				position: absolute;
				top: -19px;
				left: 2px;
			}
			body{
				background-color: #271a40;
				margin: 0;
			}
			#content{
				text-align: center;
				font: normal 16px arial;
			}
			#assurance div{
				font: bold 16px arial;
				color: #664f8c;
			}
			#assurance img{
				position: relative;
			}
			a{		
				text-decoration: none;
				font: normal 20px arial;
				color: #664f8c;
			}
			div.left{
				float:left;
			}
			#signup{
				position: relative;
				left:20%;
			}
			#login{
				position:relative;
				right:18%;
			}
			.row{
				margin: 10px 15px 10px 15px; 
				background-color:#e6e1ce; 
				color:rgb(102,80,140);
				text-decoration:none; 
				padding:10px;
				text-align: center;
			}
			.row.bg{		
				text-align: left;
				background-image:url({cms>:$imagePath}/memberbenifit1.png);
				background-repeat: no-repeat;
				background-position: right;
				background-size: 25px;
				background-position-x: 98%;
			}
			.row.bg.white{		
				background-image:url({cms>:$imagePath}/memberbenifit2.png);
			}
			.detail{
				border: solid 1px rgb(175, 166, 166);
				border-top: none;
				margin: 0 15px;
				background-color: white;
				padding: 15px 5px;
				line-height: 30px;
				display:none;
			}
			.show{
			}
		</style>
	</head>
	
	<body>
		<div>
			<img src="{cms>:$imagePath}/memberbenifit0.png" style="width: 100%; "></img>
		</div>
		<div id="top" style="background-color:#271a40; text-align:left; color: white; font: normal 16px arial;">
			<p style="padding: 10px 20px 30px 20px; margin:0; line-height: 150%;">
				贵为SPG俱乐部会员，您可获得价值超凡的Starpoints积分以用于兑换众多精彩选项。无限注日期的免费住宿奖赏是我们备受称道的礼遇。如果有一间可供应的标准客房，我们就会优先用于兑换您的免费住宿申请。此外，Starpoints积分可带给您客房升级、适用于超过350家大型航空公司的航行奖励以及商品奖励等。更多无限精彩等待您前来体验！
			</p>
		</div>
		<div id="content">	
			<div class="row" style="margin-left:25px; margin-right:25px;">
				<a id="login" href="{cms>:U('Wap/Login/login',array('openid'=>$openid))}">登录</a>
				<span id="delimiter" style="border-left:1px solid gray;"></span>
				<a id="signup" href="{cms>:U('Wap/Login/joinSpg',array('openid'=>$openid))}">立即加入</a>
			</div>
			<div class="row bg" style="margin: 30px 15px 1px 15px; background-color:white;">
				<div>优先会籍</div>
			</div>
			<div class="detail">这里是优先会籍的详细介绍。这里是优先会籍的详细介绍。这里是优先会籍的详细介绍。</div>
			<div class="row bg" style="margin: 0 15px 1px 15px;">
				<div>金会籍</div>
			</div>
			<div class="detail">这里是金会籍的详细介绍。。</div>
			<div class="row bg" style="margin: 0 15px 1px 15px; background-color:white;">
				<div>白金会籍</div>
			</div>
			<div class="detail" style="margin: 0 15px 10px 15px; background-color:white;">这里是白金会籍的详细介绍。</div>
			<div class="row bg white" style="background-color:#66508c;">
				<a id="" href="login.baidu.com" style="color:white;">备注</a>
			</div>
		</div>
	

	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	
	<script type="text/javascript">
		  $(document).ready(function(){		  
		     $(".bg").click(function(){
		    	 if($(this).hasClass('down')){
		    		 $(this).removeClass('down');
		    		 $(this).next().css('display', 'none');
		    	 }else{
		    		 $(this).addClass('down');
		    		 $(this).next().css('display', 'block');
		    	 }
			 });

		  })
		</script>
<include file="footer"/>